<template>
  <v-card class="fill-height fill-width ma-2" flat>
    <v-card-title class="d-flex align-center pe-2">
      <v-icon icon="mdi-video-input-component"></v-icon> &nbsp;
      {{ title }}

      <v-spacer></v-spacer>

      <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify"
        variant="solo-filled" flat hide-details single-line></v-text-field>
    </v-card-title>

    <v-divider></v-divider>
    <v-data-table v-model:search="search" :items-per-page="5" :items-per-page-options="[5, 10, 15, 20]"
      :filter-keys="['name']" :items="items">
      <template v-slot:header.stock>
        <div class="text-end">Stock</div>
      </template>

      <template v-slot:item.image="{ item }">
        <v-card class="my-2" elevation="5" rounded>
          <v-img :src="item.image" height="64" cover></v-img>
        </v-card>
      </template>

      <template v-slot:item.rating="{ item }">
        <v-rating :model-value="item.rating" color="orange-darken-2" density="compact" size="small" readonly></v-rating>
      </template>

      <!-- <template v-slot:item.stock="{ item }">
        <div class="text-end">
          <v-chip
            :color="item.stock ? 'green' : 'red'"
            :text="item.stock ? 'In stock' : 'Out of stock'"
            class="text-uppercase"
            size="small"
            label
          ></v-chip>
        </div>
      </template> -->

      <template v-slot:item.redirect="{ item }">
        <v-btn :href="item.redirect" target="_blank" color="darken-2" size="small" class="text-uppercase">
          Visit
        </v-btn>
      </template>

    </v-data-table>
  </v-card>
</template>

<script setup lang="ts">
const title = ref("网站导航管理");
const search = shallowRef("");
import type { WebNavItem } from '@/types/pages/webNav';
const items = ref<WebNavItem[]>([])
import { getWebNav } from '@/apis/webNav'
console.log('items', items.value);
onMounted(async () => {
  const res = await getWebNav()
  console.log('getWebNav', res);
  items.value = res
})
</script>

<style lang="less" scoped></style>
